<template>
  <div class="about">
    <span :title="message">鼠标悬停几秒查看动态绑定信息</span>
    <!-- <h1 class="red thin italic">This is an about page</h1> -->
    <!-- <h1 :class="['thin','italic','active']">This is an about page</h1> -->
    <!-- <h1 :class="['red','italic',flag?'active':'']">This is an about page</h1> -->
    <!-- <h1 :class="['red','italic',{'active':flag}]">This is an about page</h1>  -->
    <!-- <h1 :class="classObj">This is an about page</h1>  -->
    <!-- <h1 :style="{color:'red', 'font-weight':200}">This is an about page</h1>  -->
    <!-- <h1 :style="styleObj">This is an about page</h1> -->
    <!-- <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
    <p>{{list[3]}}</p>-->
    <!-- vif dom操作切换消耗，vshow较高初始消耗  第一次隐藏就vif-->
    <p v-if="seen">v-if看到了</p>
    <p v-show="seen">v-show</p>
    <p v-for="(item, index) in list" :key="index">索引:{{index}} -- 每项:{{item}}</p>
    <p v-for="(item, index) in todos" :key="index + 'm'">
      <input type="checkbox">
      {{item.text}} -- {{item.name}}
    </p>
    <p>{{content}}</p>
    <button v-on:click="push">你过来呀</button>

    <!-- vmodel只能表单元素 -->
    <input type="text" v-model="content">
    <button @click="alertShow">显示alert</button>
    <button @click="consoleLog">console显示</button>
    <input type="button" value="显示隐藏" @click="seen=!seen">
    <input type="button" value="get请求" @click="getInfo">

    <!-- <tempcom></tempcom> -->
  </div>
</template>

<style>
.red {
  color: red;
}

.thin {
  font-weight: 200;
}

.italic {
  font-style: italic;
}

.active {
  letter-spacing: 0.5em;
}
</style>

<script>
export default {
  name: 'About',
  data () {
    return {
      message: '页面加载' + new Date().toLocaleString,
      flag: true,
      classObj: { red: false, thin: true, italic: false, active: false },
      styleObj: { color: 'red', 'font-weight': 200 },
      styleObj2: { 'font-style': 'italic' },
      list: [1, 2, 3],
      todos: [
        { key: '1', text: '我去', name: '章三' },
        { key: '2', text: '我塔', name: '李四' },
        { key: '3', text: 'xxx', name: '王二' }
      ],
      seen: true,
      content: null
    }
  },
  methods: {
    push () {
      this.content = this.content + '啦'
    },
    alertShow () {
      alert('alert display')
    },
    consoleLog () {
      console.log('console iiiii')
    },
    getInfo () {
      this.$http
      // .get('https://www.hnczb.com/help/article/25')
        .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      // .get('http://10.211.4.115:8080/wp-json/wp/v2')
        .then(response => {
          alert(JSON.stringify(response.data))
        })
        .catch(error => {
          alert(error)
        })
    }
  },
  mounted () {
    // this.$http.
  }
}

// Vue.component('tempcom', {
//   template: '<h3>直接创建component</h3>'
// })

</script>
